<template>
 <div class="wrapper" ref="wrapper">
   <div>

    <slot></slot>

   </div>
  </div>

</template>
<script>
 import BScroll from 'better-scroll'
  export default {
    name:'Scroll',
    props:{
      probeType:{
            type: Number,
           default:0,
      },
      pullUpLoad:{
          type:Boolean,
          default:false,
      },

    },
   data(){
    return{
  scroll:null
    }
  },
  mounted(){
// 如果ref绑定在组件上，通过this.$refs.refname获取的是组件对象，注意：refname就是ref='x'里的x
//  如果ref绑定在普通元素上，通过this.$refs.refname获取的是普通元素对象，注意：refname就是ref='x'里的x
     this.scroll= new BScroll(this.$refs.wrapper,{
//  监听滚动位置申明probeType属性
      probeType:this.probeType,
    // 按钮button可以，别的元素如div等默认不能在wrapper内监听事件，若要监听，则添加这个属性
       click:true,
    // 上拉加载更多加该属性
       pullUpLoad:this.pullUpLoad,
 })
  // 1.scroll框架监听滚动
  this.scroll.on('scroll',opsition=>{
    //把这个事件和位置发射出去
     this.$emit('scroll',opsition)
 })
// 2.上拉加载更多
//    this.scroll.on('pullingUp',()=>{
//        this.$emit('pullingUp')
//   // // 发送网络请求，请求更多页数据
//     // 这儿写网络请求代码*****
//   // 数据请求完成，并且将新数据展示出来后，调用函数finishPullUp()表明数据加载完成，才能进行下次上拉加载
//   // 延时在调用，防止拉多次一直显示
// //  setTimeout(() => {
// //    scroll.finishPullUp()
// //  }, 2000);
//  })

// // 3.回到顶部只需要调用scrollTo(x,y)方法，传入要回到的位置坐标就行了
// //this.scorll.scrollTO(x,y)
 },


 methods:{
  //  封装finishPullUp方法
//   finishPullUp(){
//    this.scroll.finishPullUp()

//   },
  // 封装scrollTO方法,别的组件要用只需通过scroll组件调用这个方法即可
  scrollTo(x,y,time=500){
       this.scroll.scrollTo(x,y,time)
  },
  // 封装refresh方法
 refresh(){
  this.scroll.refresh()

 },

}

}
</script>

<style scoped>
/* 通过给元素设置overflow-y:scroll;属性可以使用原生滚动 */
/* .wrapper{
height: 300px;
overflow-y:scroll;
} */

/* .wrapper{
vh是视口高度或宽度
  height: 300px;
background-color: #6b54d1;
overflow: hidden;
} */
</style>
